"use client"
import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux';
import AppLayout from '@/commponent/index'
import { Button, Layout, Space, Table, Modal, Popconfirm, message, Menu, Divider, Input, Select, DatePicker, Form, Checkbox } from "antd";
import type { TableProps, TabsProps, FormProps } from 'antd';
import * as Async from '../../../store/splice'
import { CarryOutOutlined, SignatureOutlined, VerticalAlignTopOutlined, CloseOutlined, FilterOutlined, RedoOutlined, ZoomInOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import MyForm from './commponent/MyForm';
interface DataType {//表格类型
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
interface statets {
  "id": number,
  "title": string,
  "state": true,
  "CustomerStarRating": number,
  "contacts": string,
  "phone": number,
  "endTime": number,
  "time": number
}

export default function Kehu(props: any) {
  let obj = useSelector(state => state.crms)
  let dispatch = useDispatch()
  useEffect(() => {
    dispatch(Async.async_getcustomerlist())
    // dispatch
  }, [])
  const { Header, Footer, Sider, Content } = Layout;
  const headerStyle: React.CSSProperties = {//头部样式
    background: "white",
    height: "150px"
  };

  const contentStyle: React.CSSProperties = {//内容样式
    minHeight: 120,
    // lineHeight: '120px',
    backgroundColor: 'white',
  };

  const siderStyle: React.CSSProperties = {
    textAlign: 'center',
    lineHeight: '120px',
    color: '#fff',
    // backgroundColor: '#1677ff',
  };

  const footerStyle: React.CSSProperties = {//底部样式
    textAlign: 'center',
    color: '#fff',
    // backgroundColor: '#4096ff',
  };

  const layoutStyle = {//布局样式
    borderRadius: 8,
    overflow: 'hidden',
    width: "100%",
    height: "100%"
  };
  const columns: TableProps<DataType>['columns'] = [//表格表头
    {
      title: "客户名称",
      dataIndex: 'title',
      sorter: true,
    },
    {
      title: "客户状态",
      dataIndex: "state",
      sorter: true,
      render: (state: boolean) => {
        return state ? "正在跟进" : "已完成更近"
      }
    },
    {
      title: "客户星级",
      dataIndex: 'CustomerStarRating',
      sorter: true,
    },
    {
      title: "首席联系人",
      dataIndex: 'contacts',
      sorter: true,
    },
    {
      title: "手机号码",
      dataIndex: 'phone',
      sorter: true,
    },
    {
      title: "最后跟进",
      dataIndex: 'endTime',
      sorter: true,
      render: (endTime) => {
        console.log(endTime);
        return dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    {
      title: "未跟进天数",
      dataIndex: 'time',
      sorter: true,
      render: (time, record) => {
        const Time = time - record.endTime
        return dayjs(Time).format(`D天`)
      }
    },
    {
      title: "操作",
      render: (_, record) => {
        return (
          <div>
            <Space>
              <span><CarryOutOutlined /> 跟进</span>
              <span onClick={() => {
                showModal()
                setTitle('编辑')
                setItemobj(record)
              }}><SignatureOutlined /> 编辑</span>
              <span><VerticalAlignTopOutlined />置顶</span>
              <Popconfirm
                title="警告"
                description="确定删除吗？"
                onConfirm={() => {
                  dispatch(Async.async_delcustomerlist(record.id))
                  message.open({
                    type: 'success',
                    content: '删除成功',
                  });
                }}
                onCancel={() => {
                  message.error('取消删除');
                }}
                okText="确定"
                cancelText="取消"
              >
                <span><CloseOutlined />删除</span>
              </Popconfirm>

            </Space>
          </div>
        )
      }
    },
  ]
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title, setTitle] = useState('新增')
  const [itemobj, setItemobj] = useState({})

  const showModal = () => {//显示弹框
    setIsModalOpen(true);
  };

  const handleOk = () => {//关闭弹框
    setIsModalOpen(false);
  };

  const handleCancel = () => {//关闭弹框
    setIsModalOpen(false);
  };
  const items: TabsProps['items'] = [//顶部列表
    {
      key: '1',
      label: '全部客户',
    },
    {
      key: '2',
      label: '我的客户',
    },
    {
      key: '3',
      label: '下属客户',
    },
    {
      key: '4',
      label: '重点客户',
    },
    {
      key: '5',
      label: '我的协作',
    },
    {
      key: '6',
      label: '下属协作的',
    },
  ];
  //！！！！！搜索！！！！
  type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
  };
  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
    dispatch(Async.async_searchcustomerlist(values))
  };

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const [searchFrom] = Form.useForm();
  return (
    <AppLayout>
      <Layout style={layoutStyle}>
        <Header style={headerStyle}>
          <Menu mode="horizontal" items={items} />
          <div style={{}}>
            <Form //搜索表单
              name="basic"
              layout='inline'
              form={searchFrom}
              style={{ marginTop: "20px", width: "100%" }}
              // initialValues={{ remember: true }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="客户名称"
                name="title"
              >
                <Input placeholder="客户名称" />
              </Form.Item>

              <Form.Item
                label="客户状态"
                name="state"
              >
                <Select
                  placeholder="请选择客户状态"
                  style={{ width: 150 }}
                  options={[
                    { value: true, label: '正在跟进' },
                    { value: false, label: '已完成' },
                  ]}
                />
              </Form.Item>
              <Form.Item
                label="客户类型"
                name="CustomerStarRating"
              >
                <Select
                  placeholder="客户类型"
                  style={{ width: 150 }}
                  options={[
                    { value: "", label: '' },
                    { value: 1, label: '一星客户' },
                    { value: 2, label: '二星客户' },
                    { value: 3, label: '三星客户' },
                    { value: 4, label: '四星客户' },
                    { value: 5, label: '五星客户' },
                  ]}
                />
              </Form.Item>
              <Form.Item>
                <DatePicker showTime />
              </Form.Item>
              <Form.Item label={null}>
                <Space>
                  <Button type="primary" htmlType="submit">
                    搜索
                  </Button>
                  <Button type="primary" htmlType="button" onClick={()=>{
                    searchFrom.resetFields()
                  }}>
                    重置
                  </Button>
                  <span style={{color:"rgb(22, 119, 255)",fontWeight:"bold"}}>
                  <FilterOutlined />
                    高级搜索
                  </span>
                </Space>
              </Form.Item>
            </Form>
          </div>
        </Header>
        <Content style={contentStyle}>
          <Button type="primary" 
          style={{marginLeft:"10px"}}
          onClick={() => {
            showModal()
            setTitle('新增')
            setItemobj({})
          }}>
            新增
          </Button>
          <Modal title={title} open={isModalOpen} onOk={handleOk} footer={null} onCancel={handleCancel}>
            <MyForm itemobj={itemobj} key={new Date().getTime()} onCancel={handleCancel} title={title} />
          </Modal>
          <Table<DataType> columns={columns} dataSource={obj.customerlist} rowKey="id" />
        </Content>
        <Footer style={footerStyle}>Footer</Footer>
      </Layout>
    </AppLayout>
  )
}
